<template>
    <div class="main_content AddOrEditPersonal">
      <father-title :title="fatherTitle"></father-title>
      <div class="contentBox">
        <!-- <header-line :title="headerTitle"></header-line> -->
        <div class="middleBox">
          <search-box @clickSearch="search">
            <template slot="left">
              <Input v-model="searchParams.name" placeholder="停车场名称" clearable></Input>
              <Input v-model="searchParams.locaiton" placeholder="停车场地址" clearable></Input>
            </template>
  
            <template slot="right">
              <Button v-if="$store.state.perms.includes('sys:schedule:save')" type="primary" @click="addData">新增</Button>
            </template>
          </search-box>
          <v-table :loading="pageConfig.loading" ref="selection" border :columns="columns" :data="list">
            <template slot-scope="{ row }" slot="status">
              <span>{{status.find((item)=>item.value===row.status).key}}</span>
            </template>
            <template slot-scope="{ row }" slot="operation">
              <Button v-if="$store.state.perms.includes('sys:role:update')" type="primary" size="small" @click="editData(row)">编辑</Button>
              <Button v-if="$store.state.perms.includes('sys:role:delete')" class="button_spacing" type="error" size="small" @click="stopUse(row)">停用</Button>
            </template>
          </v-table>
          <v-page :pageConfig="pageConfig" @refresh="getList"></v-page>
        </div>
      
       
      <AddOrEditModal
          v-model="modalCTL.show"
          :title="modalCTL.title"
          :loading="modalCTL.loading"
          width="50%"
          @on-ok="editPassword">
        <Form
            ref="form"
            :model="formValidate"
            :rules="ruleValidate"
            label-position="left"
            :label-width="100"
            slot="content">
          <FormItem label="名称" prop="newPassword">
            <Input type="text" v-model="formValidate.newPassword" placeholder="请输入停车场名称" />
          </FormItem>
          <FormItem label="地址" prop="confirmPassword">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入停车场详细地址" />
          </FormItem>
          <FormItem label="停车费用" prop="confirmPassword">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入停车费用" />
          </FormItem>
          <FormItem label="免费时间" prop="confirmPassword" class="flexOut">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入免费停车时间" />
            <span>分钟</span>
          </FormItem>
          <FormItem label="第一阶梯" prop="confirmPassword" class="flexOut">
            <i class="icons">></i>
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="" />
            <span>小时</span>
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="" />
            <span>元/小时</span>
          </FormItem>
          <FormItem label="第二阶梯" prop="confirmPassword" class="flexOut">
            <i class="icons">></i>
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="" />
            <span>小时</span>
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="" />
            <span>元/小时</span>
          </FormItem>
          <FormItem label="第三阶梯" prop="confirmPassword" class="flexOut">
            <i class="icons">></i>
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="" />
            <span>小时</span>
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="" />
            <span>元/小时</span>
          </FormItem>
          <FormItem label="日封顶" prop="confirmPassword">
            <Input type="text" v-model="formValidate.confirmPassword" placeholder="请输入日封顶费用" />
          </FormItem>
        </Form>
      </AddOrEditModal>
      </div>
    </div>
  </template>
  
  <script>
  import {columns, pageConfig, formValidate, ruleValidate, status} from "./pageConfig";
  export default {
    name: 'ParkingLot',
  
    data() {
      return {
      
        fatherTitle: "停车场信息",
        modalCTL: {
          show: false,
          loading: true,
          title: "新增停车场"
        },
        columns,
        pageConfig,
        formValidate: {...formValidate},
        ruleValidate,
        status,
        list: [
         
        ],
        searchParams:{
  
        }
        // search
      };
    },
  
    mounted() {
  
    },
  
    computed: {},
  
    methods: {
      search(){
  
      },
      addData(){
        this.modalCTL.show = true;
      },
      editData(row){
  
      },
      stopUse(row){
  
      },
      getList(){
  
      }
    }
  };
  </script>
  
  <style scoped lang="less">
  .flexOut{
    display: flex;
    align-items: center;
    // justify-content: space-between;
    /deep/ .ivu-form-item-content{
      display: flex;  
      margin-left: 0!important;
     
      span{
        width: 50px;
        flex-shrink: 0;
        display: inline-block;
        margin-left: 10px!important;
      }
      .icons{
        margin-right: 10px;
      }
    }
  }
  
  .AddOrEditPersonal {
    .contentBox{
      overflow-y: scroll;
    
    }
    .form{
      display: flex;
      flex-direction: column;
      width: 800px;
      padding: 20px;
      flex: 1;
    }
  }
  </style>